<template>
  <div class="currency_details_page">
    <CommonHeader :title="coinInfo.coinName" />
    <!-- 币种详情主体 -->
    <div class="currency_details_content page_no_tab_bar">
      <!-- 总资产 -->
      <div class="total_assets font_color">
        <span>总资产USD</span>
        <img src="@/assets/login/open_icon.png" alt="" />
      </div>
      <div class="assets_transfer">
        <span>{{ coinInfo.usableBalance + coinInfo.freezeBalance || 0 }}</span>
        <span class="font_color">≈${{ coinInfo.usableBalance + coinInfo.freezeBalance || 0 }}</span>
      </div>
      <!-- 资产明细 -->
      <ul class="assets_details">
        <li>
          <div class="font_color">可用余额</div>
          <div>{{ coinInfo.usableBalance || 0}}</div>
        </li>
        <li>
          <div class="font_color">不可用</div>
          <div>{{ coinInfo.freezeBalance || 0}}</div>
        </li>
        <li>
          <div class="font_color">今日盈亏</div>
          <div>{{ coinInfo.todayPL || 0 }}</div>
        </li>

      </ul>
      <!-- 历史 -->
      <div class="currency_history">
        <div>历史</div>
        <!-- <div class="font_color right">
          <span>全部</span>
          <el-icon v-if="false"><CaretTop /></el-icon>
          <el-icon v-else><CaretBottom /></el-icon>
        </div> -->
      </div>
      <!-- 历史列表 -->
       <ul class="history_list" v-if="recordsList.length">
        <li v-for="(item,index) in recordsList" :key="index">
          <div class="left">
            <div>{{ item.text }}</div>
            <div class="font_color">{{ item.createTime }}</div>
          </div class="right">
          <div :class="item.profitAndLoss >= 0 ?'add_number' : 'cur_number'">{{ item.profitAndLoss }}</div>
        </li>
       </ul>
       <div v-else class="font_color">暂无历史</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { getPageAssetsLog } from "@/api/assets";
import { useRoute } from "vue-router";

const route = useRoute()
// 参数
const queryParams = ref({
  pageNo: 1,
  pageSize: 100,
  coinName: ""
})
const coinInfo: any = ref({
  coinName: "",
})
// 
const recordsList: any = ref([])

// 获取数据
const getData = (coin: any) => {
  getPageAssetsLog({...queryParams.value, coinName: coin}).then((res: any) => {
    recordsList.value = res.data.records || []
  })

}

// 初始化数据
onMounted(()=>{
  coinInfo.value = JSON.parse(sessionStorage.getItem("row") || "{}");
getData(coinInfo.value.coinName);


})
</script>

<style lang="scss" scoped>
.currency_details_page {
  .currency_details_content {
    padding-top: 10px;
    .total_assets {
      display: flex;
      align-items: center;
      span {
        margin-right: 10px;
      }
    }
    .assets_transfer {
      margin-top: 5px;
      display: flex;
      align-items: center;
      font-size: 14px;
      & > span:first-child {
        font-size: 22px;
        margin-right: 10px;
      }
    }
    .assets_details {
      margin: 20px 0;
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;

      li {
        width: 50%;
        margin-bottom: 20px;
        div {
          margin-bottom: 5px;
        }
      }
    }
    .currency_history {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .right {
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          margin-right: 10px;
        }
      }
    }
    .history_list {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        .left {
          &>div:first-child {
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>
